<template>
    <div>
        <el-card class="box-card cardItem">
            <div class="top-btn-container">
                <el-button
                    size="mini"
                    style="margin-right: 1rem"
                    type="primary"
                    @click="handleSave('open')"
                >启用</el-button>
                <el-button
                    size="mini"
                    style="margin-right: 1rem"
                    type="primary"
                    @click="handleSave('save')"
                >保存</el-button>
                <el-button
                    size="mini"
                    style="margin-right: 1rem"
                    type="primary"
                    @click="toRole"
                >权限设置</el-button>
                <el-button size="mini" @click="goBack">返回</el-button>
            </div>
            <div style="display: flex; margin: 1rem;">
                <el-row :gutter="20" style="width: 100%; align-items: center">
                    <el-col :span="4">
                        <span style="margin-right: 2rem">创建人：{{ createUser }}</span>
                    </el-col>
                    <el-col :span="4">
                        <span>创建时间：{{ createTime }}</span>
                    </el-col>
                    <el-col :span="12">
                        <div style="display: flex; align-items: center">
                            <label>所属系统：</label>
                            <el-select v-model="systemName" placeholder="请选择系统">
                                <el-option
                                    v-for="(item ,idx) in list"
                                    :label="item.label"
                                    :value="item.label"
                                    :key="idx"
                                ></el-option>
                            </el-select>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <block-diagram-add
                :title="title"
                :btnName="btnName"
                :cardList="cardList"
                :systemName="systemName"
                @handleCommit="handleCommit"
            ></block-diagram-add>
        </el-card>
    </div>
</template>

<script>

import BlockDiagramAdd from "../../components/BlockDiagramAdd.vue"

export default {
    components: {
        BlockDiagramAdd
    },
    setup(props) {
        const title = '新增列表'
        const btnName = '新增列表'
        let cardList = [{
            title: '列表',
            btnName: '添加表单',
            contentList: [],
            systemName: '',
        }]
        return {
            title,
            btnName,
            cardList,
        }
    },
    data() {
        return {
            form: {},
            createUser: '',
            createTime: '',
            list: [{
                label: 'CRM',
                value: 'CRM',
            }, {
                label: '采购系统',
                value: '采购系统',
            }],
            systemName: '',
            listData: [],
        }
    },
    created() {
        this.createTime = this.$moment().format('YYYY-MM-DD')
        this.createUser = localStorage.getItem('userName')
        this.getData()
    },
    methods: {
        getData() {

        },
        handleSave(type) {
            const param = {
                ppcgBlockDiagarm: {
                    systemName: this.systemName,
                    createUser: this.createUser,
                    createTime: this.createTime,
                    ppcgBlockDiagarmListDtlList: this.listData,
                    state: type === 'save' ? '草稿' : '启用',
                }
            }
            this.$axios.post(`/form/formDefData/saveData?key=ppcgBlockDiagarm&sql=`, param).then(res => {
                if (res.isOk) {
                    this.$ElMessage({
                        message: '保存成功',
                        type: 'success',
                    })
                    this.goBack()
                } else {
                    this.$ElMessage({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })

        },
        goBack() {
            this.$router.go(-1)
        },
        toRole() {
            window.open('http://pur.ppcg.com.cn/ppcgui/org/role/roleList.html')
        },
        handleCommit(list) {
            let newList = []
            list.map(item => {
                if (!item.ppcgBlockDiagarmDtlList) {
                    item.ppcgBlockDiagarmDtlList = []
                }
                item.contentList.map(c => {
                    item.ppcgBlockDiagarmDtlList.push({
                        systemName: c.form.systemName,
                        isTitle: c.form.isTitle,
                        tableUrl: c.form.tableUrl,
                        titleName: c.form.titleName,
                        tableName: c.form.tableName,
                        frequency1: c.form.frequency,
                        frequency2: c.form.frequency2,
                        frequency3: c.form.frequency3,
                        isPercentageCount: c.form.isPercentageCount,
                        startTime: c.form.date[0],
                        endTime: c.form.date[1],
                        count: c.form.count,
                        masterId: '',
                    })
                })

                newList.push({
                    name: item.title,
                    ppcgBlockDiagarmDtlList: item.ppcgBlockDiagarmDtlList
                })
            })
            this.listData = newList
        }
    },
}
</script>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 0.5rem;
}

.box-card {
    width: 20;
}
.container {
    display: flex;
}
.cardItem {
    margin: 0 0.5rem;
    width: 100%;
}
</style>